import TextButtonWithChild from "@/components/TextButtonWithChild"
import { Album } from "@/faker/album/albums"
import { Song } from "@/faker/songs/ranking-songs"
import { useAppDispatch } from "@/hooks/store"
import { getAlbumWithId } from "@/services/modules/albums"
import { AddIcon, ChatIcon, CheckCircleIcon,LinkIcon ,Td,ArrowDownIcon,ChevronRightIcon} from "@chakra-ui/icons"
import { Box, Button, Flex, Grid, GridItem,Heading,Icon,Tbody,Table, Th, Tr, Thead,Image,Text,HStack } from "@chakra-ui/react"
import { useEffect ,useState} from "react"
import { useParams } from "react-router-dom"
import columns from "@/data/ranking-song-columns";
import { formatTime } from "@/components/utils/formatTime"

const buttonList = [
    {text:"添加", icon:<Icon as={AddIcon} mr={2}/>},
    {text:"收藏", icon:<Icon as={CheckCircleIcon} mr={2}/>},
    {text:"分享", icon:<Icon as={LinkIcon} mr={2}/>},
    {text:"评论", icon:<Icon as={ChatIcon} mr={2}/>},
]
interface IProps {
    
}
const SongsDetail = () => {
    const {id} = useParams()
    const dispatch = useAppDispatch()
    const [album,setAlbum] = useState<Album>()
    useEffect(()=>{
        getAlbumWithId(Number(id)).then(res=>{
            setAlbum(res)
        })
    },[id])
    return (
        <Grid templateColumns={"1fr 3fr"}  mt={4} gap={20}>
            <GridItem >
                <Box w="100%" aspectRatio="1/1" overflow="hidden" position="relative"
                    pb="100%"
                >
                    <Image 
                    position="absolute"
                    top="0"
                    left="0"
                    w="100%"
                    h="100%"
                    objectFit="cover"
                    src={album?.picUrl} alt={album?.name} />
                </Box>
                <Text fontSize="20px" fontWeight="bold" mt={6} mb={2}>歌单简介</Text>
                <Text>{album?.bio}</Text>
                <TextButtonWithChild>
                <Icon as={ArrowDownIcon} mr={2}/>下载该歌单
                </TextButtonWithChild>
            </GridItem>
            <GridItem  >
                <Text fontSize="30px" fontWeight="bold" mt={6} mb={2}>{album?.name}</Text>
                <Flex height="32px"  alignItems="center" gap={2}>
                    <Image src={album?.artist.avatar} alt={album?.artist.name} h="100%" aspectRatio="1/1" borderRadius="full" />
                    <Text>{album?.artist.name}</Text>
                </Flex>
                <Box display="flex" gap={2} mt={4}>
                    <TextButtonWithChild  w="150px">
                        <Icon as={ChevronRightIcon} mr={2}/>播放全部
                    </TextButtonWithChild>
                    {buttonList.map((item,index)=>(
                        <TextButtonWithChild 
                        w="110px"
                        key={index} colorScheme="gray.100">
                        {item.icon}{item.text}
                        </TextButtonWithChild>
                    ))}
                </Box>
            <Table size="sm" variant='striped'  mt={6}  fontSize="14px">
                <Thead bg="gray.50" h="46px">
                    <Tr>
                        {columns.filter(item=>item.key !== "album").map((title)=>(
                            <Th key={title.key}>{title.title}</Th>
                        ))}
                    </Tr>
                </Thead>
                <Tbody >
                    {album?.songs.map((item:Song,index) => (
                        <Tr key={item.id} _hover={{bg:"gray.200"}}>
                            <Td fontWeight="bold" pl={6}>{index+1}</Td>
                            <Td>
                                <HStack spacing={2}>
                                    <Image src={item.picUrl} alt={item.name} width={50} height={50} />
                                    <Text>{item.name}</Text>
                                </HStack>
                            </Td>
                            <Td>{item.artist}</Td>
                            <Td>{formatTime(item.duration)}</Td>
                        </Tr>
                    ))}
                </Tbody>
            </Table>
            </GridItem>
        </Grid>
    )
}

export default SongsDetail  
